<template>
    <!--title:z自定义指令-->
    <div class="me-ct-body" v-title :data-title="title">
        <el-container class="me-ct-container">
            <el-main>
                <div class="me-ct-title me-area">
                    <!--根据路由参数判断选择显示分类还是标签的图片  、标题-->
                    <template v-if="this.$route.params.type === 'tag'">
                        <img class="me-ct-picture" :src="ct.avatar?ct.avatar:defaultAvatar"/>
                        <h3 class="me-ct-name">{{ct.tagName}}</h3>
                    </template>

                    <template v-else>
                        <img class="me-ct-picture" :src="ct.avatar?ct.avatar:defaultAvatar"/>
                        <h3 class="me-ct-name">{{ct.categoryName}}</h3>
                        <p>{{ct.description}}</p>
                    </template>

                    <span class="me-ct-meta">{{ct.articles}} 文章</span><br>
                </div>

                <el-button type="success"  @click="back" plain style="margin-left: 29%">返回</el-button>
                <!--滚动查询数据-->
                <div class="me-ct-articles">
                    <article-scroll-page v-bind:query="article"></article-scroll-page>
                </div>

            </el-main>
        </el-container>
    </div>
</template>

<script>
    import defaultAvatar from '@/assets/img/logo.png'
    import ArticleScrollPage from "@/components/common/ArticleScrollPage"
    import {getTagDetailById} from "@/api/tag"
    import {getCategoryDetailById} from "@/api/category"
    export default {
        name: "BlogCategoryTag",
        data(){
            return {
                //默认的图标
                defaultAvatar: defaultAvatar,
                //分类或标签对象
                ct : {},
                //请求文章的滚动参数，标签和类别id
                article : {
                    tagId:null,
                    categoryId:null
                }
            }
        },
        components:{
            "article-scroll-page": ArticleScrollPage
        },
        created(){
            //进行后端请求 请求数据
            this.getCategoryOrTagAndArticles();
        },
        methods:{

            back() {

                this.$router.back()
            },
            getCategoryOrTagAndArticles(){
                //根据路由信息判断，请求什么列表
                var type = this.$route.params.type;
                var id = this.$route.params.id;
                if('tag' == type){
                    this.getTagDetailById(id);
                    this.article.tagId = id;
                }
                if('category' == type){
                    this.getCategoryDetailById(id);
                    this.article.categoryId = id;

                }
            },
            getTagDetailById(id){
                //发起http请求 请求后端的数据
                getTagDetailById(id).then((res)=>{
                    ////res.data = Result (success,msg,data)
                    if(res.data.success){
                        this.ct = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error("系统错误");
                }).finally(()=>{
                })
            },
            getCategoryDetailById(id){
                //发起http请求 请求后端的数据
                getCategoryDetailById(id).then((res)=>{
                    ////res.data = Result (success,msg,data)
                    if(res.data.success){
                        this.ct = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error("系统错误");
                }).finally(()=>{
                })
            }
        },
        computed:{
            title(){
                if(this.$route.params.type == 'tag'){
                    return "标签-码神之路"
                }else{
                    return "文章分类-码神之路"
                }
            }
        },

    }
</script>

<style>
    .me-ct-body {
        margin: 60px auto 140px;
        min-width: 100%;
    }

    .el-main {
        padding: 0;
    }

    .me-ct-title {
        text-align: center;
        height: 150px;
        padding: 20px;
    }

    .me-ct-picture {
        width: 60px;
        height: 60px;
    }

    .me-ct-name {
        font-size: 28px;
    }

    .me-ct-meta {
        font-size: 12px;
        color: #969696;
    }

    .me-ct-articles {
        width: 640px;
        margin: 30px auto;
    }

</style>
